<template>
  <div id="rewrite">
    <div class="hong">
      <div class="login">
        <div class="header">重置密码</div>
        <div class="center">
          <div class="box1">&emsp;&emsp;新密码：<input type="text" v-model="password1" placeholder="请设置新的登录密码"></div>
          <div class="box2">确定新密码：<input type="password" v-model="password2" placeholder="确认密码"></div>
        </div>
        <div class="footer">
          <div class="btn" @click="modify">确定修改</div>
        </div>
        <!-- <div class="mouse"><img src="../assets/image/bgcimg.3.jpg" alt=""></div> -->
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  name: "rewrite",
  data() {
    return {
      uid: this.$route.query.uid,
      password1: "",
      password2: ""
    };
  },
  methods: {
    modify() {
      if (!this.password1 || !this.password2) {
        this.$message({ message: "密码不能为空", type: "error" });
      } else if (this.password1 === this.password2) {
        this.axios
          .post("Login/ca_password_cl", {
            uid: this.uid,
            password: this.password1
          })
          .then(({ data }) => {
            console.log(data);
            if (data.status === "2") {
              this.$message({ message: "修改失败", type: "error" });
            } else if (data.status === "1") {
              this.$router.push("login");
              this.$message({ message: "修改成功", type: "success" });
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        this.$message({ message: "密码不一致", type: "error" });
      }
    }
  }
};
</script>
<style lang="scss">
#rewrite {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../assets/image/bgc123.jpg") no-repeat;
  background-size: 100% 100%;
  &:after {
    content: "";
    width: 652px;
    height: 374px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    background: inherit;
    filter: blur(30px); /*为了模糊更明显，调高模糊度*/
    z-index: 0;
  }
  .hong {
    width: 100%;
    height: 374px;
    margin: 20vh auto;
    .login {
      width: 652px;
      background: linear-gradient(
        169.4deg,
        rgba(251, 251, 251, 0.1),
        rgba(217, 217, 217, 0.1)
      );
      box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      margin: 0 auto;
      position: relative;
      text-align: center;
      z-index: 99;      
      .header {
        width: 593px;
        height: 75px;
        font-size: 30px;
        font-weight: 700;
        font-family: MicrosoftYaHei-Bold;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        line-height: 75px;
        border-bottom: 1px solid rgba(153, 153, 153, 1);
      }
      .center {
        margin-top: 40px;
        .box2 {
          margin-top: 20px;
        }
        input {
          width: 283px;
          height: 33px;
          background: rgba(255, 255, 255, 1);
          border-radius: 2px;
          padding-left: 10px;
          box-sizing: border-box;
          border: 1px solid rgba(153, 153, 153, 0.6);
        }
      }
      .footer {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        line-height: 42px;
        .btn {
          cursor: pointer;
          width: 167px;
          height: 42px;
          background: linear-gradient(
            -90deg,
            rgba(255, 68, 63, 1),
            rgba(224, 3, 0, 1)
          );
          border-radius: 4px;
          text-align: center;
          color: #fff;
          font-size: 15px;
          margin-right: 25px;
          margin-left: 25px;
          margin-bottom: 80px;
        }
      }
      .mouse {
        z-index: -1;
        position: absolute;
        right: -124px;
        bottom: -217px;
      }
    }
  }
}
</style>
